<script lang="ts" setup>
import { DragType, type ModuleInfo } from './types'
import { StatusStyle } from './constants'

defineProps<{ moduleSourceList: ModuleInfo[] }>()
</script>

<template>
  <div
    v-for="{ id, name, svg } of moduleSourceList"
    :key="id"
    :data-id="id"
    :data-type="DragType.ModuleSource"
    draggable="true"
    :class="StatusStyle.SlotPending"
    class="flex items-center w-24 my-2 h-16 border-solid border-rounded hover:cursor-grab active:cursor-grabbing"
  >
    <img class="w-full pointer-events-none" :src="svg" :alt="name" />
  </div>
  <div class="w-24 border-solid border-y-0"></div>
</template>
